<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <!-- 基础卡片 -->
      <div class="card">
        <div class="card-body">基础卡片</div>
      </div>
      <hr />
      <!-- 卡片添加内容 -->
      <div class="card">
        <!-- 卡片头 -->
        <div class="card-header">培训</div>
        <!-- 卡片主题 -->
        <div class="card-body">
          <!-- 卡片标题 -->
          <h5 class="card-title">Bootstrap</h5>
          <!-- 卡片副标题 -->
          <h6 class="card-subtitle mb-2 text-muted">版本：4.0</h6>
          <!-- 卡片文字 -->
          <p class="card-text">
            开始使用boostrap，这是世界上最流行的前端框架，用于构建响应式移动优先网站，使用js和模板创建入门的网页
          </p>
          <!-- 卡片连接 -->
          <a href="#" class="card-link">了解更多</a>
        </div>
        <!-- 卡片脚 -->
        <div class="card-footer text-muted">1天以前</div>
      </div>
      <hr />
      <!-- 带列表组的卡片 -->
      <!-- 可以使用css来控制卡片的宽度 -->
      <div class="card text-center" style="width: 18rem">
        <div class="card-header">培训</div>
        <!-- 列表组放在卡片头和主体中间 -->
        <!-- .list-group-flush去除列表组的圆角效果 -->
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Bootstrap</li>
          <li class="list-group-item">HTML</li>
          <li class="list-group-item">CSS</li>
        </ul>
        <div class="card-body">
          <a href="#" class="card-link">了解更多</a>
          <a href="#" class="card-link">分享</a>
        </div>
      </div>
      <hr />
      <!-- 卡片内使用图片 -->
      <div class="card" style="width: 18rem">
        <!-- .card-img-top让图片对齐到卡片的最顶端 -->
        <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
        <div class="card-body">
          <p class="card-text">
            开始使用boostrap，这是世界上最流行的前端框架，用于构建响应式移动优先网站，使用js和模板创建入门的网页。
          </p>
        </div>
      </div>
      <hr />

      <div class="card" style="width: 18rem">
        <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
        <div class="card-body">
          <h5 class="card-title">John</h5>
          <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
          <a href="#" class="btn btn-primary">联系</a>
        </div>
      </div>
      <hr />
      <!-- 自定义卡片背景和边框 -->
      <div class="row">
        <div class="col-sm-6">
          <!-- .text-white将文本设置为白色 -->
          <!-- .bg-primary将卡片背景设置为蓝色 -->
          <div class="card text-white bg-primary mb-4">
            <div class="card-body">
              <h5 class="card-title">Bootstrap</h5>
              <!-- .text-right让文本右对齐 -->
              <p class="card-text text-right">
                开始使用boostrap，这是世界上最流行的前端框架，用于构建响应式移动优先网站，使用js和模板创建入门的网页。
                开始使用boostrap，这是世界上最流行的前端框架，用于构建响应式移动优先网站，使用js和模板创建入门的网页。
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <!-- .border-success设置卡片边框颜色为绿色 -->
          <div class="card border-success mb-4">
            <div class="card-body">
              <h5 class="card-title">HTML</h5>
              <p class="card-text">
                HTML(超文本标记语言）用于构建网页以及内容的代码。例如，可以将内容结构化为一组段落/一个列表或者使用图像或者数据。
                HTML(超文本标记语言）用于构建网页以及内容的代码。例如，可以将内容结构化为一组段落/一个列表或者使用图像或者数据。
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 卡片堆 -->
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
          <div class="card-body">
            <h5 class="card-title">John</h5>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <a href="#" class="btn btn-primary">联系</a>
          </div>
        </div>
        <div class="card">
          <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
          <div class="card-body">
            <h5 class="card-title">John</h5>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <a href="#" class="btn btn-primary">联系</a>
          </div>
        </div>
      </div>
      <hr>
      <!-- 卡片组 -->
      <div class="card-group">
        <div class="card">
          <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
          <div class="card-body">
            <h5 class="card-title">John</h5>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <a href="#" class="btn btn-primary">联系</a>
          </div>
        </div>
        <div class="card">
          <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
          <div class="card-body">
            <h5 class="card-title">John</h5>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <a href="#" class="btn btn-primary">联系</a>
          </div>
        </div>
      </div>
      <hr>
      <!-- 卡片列 -->
      <div class="card-columns">
        <div class="card">
          <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
          <div class="card-body">
            <h5 class="card-title">John</h5>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <a href="#" class="btn btn-primary">联系</a>
          </div>
        </div>
        <div class="card">
          <img class="card-img-top" src="../images/LOGO.PNG" alt="" />
          <div class="card-body">
            <h5 class="card-title">John</h5>
            <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
            <a href="#" class="btn btn-primary">联系</a>
          </div>
        </div>
      </div>
      <!-- 图片上覆盖文字 -->
      <div class="card" style="width: 350px;">
        <img class="card-img-top" src="../images/LOGO.PNG" alt=""  />
        <!-- 将.card-bodu替换成.card-img-overlay，主体内的文字就会覆盖到图片上 -->
        <div class="card-img-overlay text-white">
          <h5 class="card-title">John</h5>
          <p class="card-text">John是HTML,JS,CSS和Boostrap的培训师。</p>
          <a href="#" class="btn btn-primary">联系</a>
        </div>
      </div>

    </div>
  </body>
</html>
